import React, { useRef } from 'react';
import KPageHeader from '@/components/KPageHeader';
import { Card, Col, message, Popconfirm, Row, Tabs } from 'antd';
import { useRequest } from 'ahooks';
import { PageLoading } from '@ant-design/pro-layout';
import styles from './style.module.less';
import { history } from 'umi';
import { useParams } from 'react-router-dom';
import { apiRole } from '@/api/system/roles.api';
import { SystemEditRole } from '@/pages/system/roles/edit';
import { ActionType, ProColumnType } from '@ant-design/pro-table';
import KTable from '@/components/KTable';

// 成员管理
const UsersList = (props: { role?: API.Role }) => {
  const table = useRef<ActionType>();
  const { run: deleteUsers } = useRequest(apiRole.deleteUsers, {
    manual: true,
    onSuccess: () => {
      table.current?.reload();
      message.success('操作成功');
    },
  });
  const columns: ProColumnType<API.Users>[] = [
    {
      title: '登录名/显示名称',
      render: (_, record) => (
        <>
          <a onClick={() => history.push(`/system/users/${record.id}`)}>
            {record.username}
          </a>
          <div>{record.nickname}</div>
        </>
      ),
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '加入时间',
      dataIndex: 'created_at',
    },
    {
      title: '操作',
      align: 'right',
      render: (_, record) => (
        <>
          <Popconfirm
            title={'确定将用户移出该角色?'}
            onConfirm={() => deleteUsers(props.role?.id ?? 0, [record.id])}
          >
            <a>移出角色</a>
          </Popconfirm>
        </>
      ),
    },
  ];
  return (
    <KTable
      rowKey={'id'}
      actionRef={table}
      request={p => {
        return apiRole.getUsers(props.role?.id ?? 0, p);
      }}
      size={'small'}
      columns={columns}
      search={false}
    />
  );
};

// 权限管理
const ManagerList = (props: { role?: API.Role }) => {
  const table = useRef<ActionType>();
  const { run: deletePermissions } = useRequest(apiRole.deletePermissions, {
    manual: true,
    onSuccess: () => {
      table.current?.reload();
      message.success('操作成功');
    },
  });
  const columns: ProColumnType<API.RolePermission>[] = [
    {
      title: '权限名称',
      dataIndex: 'name',
    },
    {
      title: '备注',
      dataIndex: 'title',
    },
    {
      title: '授权时间',
      dataIndex: 'created_at',
    },
    {
      title: '操作',
      align: 'right',
      render: (_, record) => (
        <>
          <Popconfirm
            title={'确定移除权限?'}
            onConfirm={() =>
              deletePermissions([props.role?.id ?? 0], [record.name])
            }
          >
            <a>移除权限</a>
          </Popconfirm>
        </>
      ),
    },
  ];
  return (
    <KTable
      rowKey={'id'}
      actionRef={table}
      request={p => {
        return apiRole.getPermissions(props.role?.id ?? 0, p);
      }}
      size={'small'}
      columns={columns}
      search={false}
    />
  );
};

export default () => {
  const { id } = useParams<{ id: string }>();
  const { data, loading } = useRequest(apiRole.getInfo, {
    defaultParams: [Number(id)],
  });
  return (
    <>
      <KPageHeader title={'查看角色'} />

      {loading ? (
        <PageLoading />
      ) : (
        <Card>
          <h4 className={styles.infoTitle}>
            角色信息
            <SystemEditRole role={data} />
          </h4>

          <Row className={styles.infoRow}>
            <Col span={12}>
              角色名称：
              {data?.name}
            </Col>

            <Col span={12}>
              ID：
              {data?.id}
            </Col>

            <Col span={12}>创建时间： 2012-12-12 xx:xx:xx</Col>

            <Col span={24}>备注： x</Col>
          </Row>

          <Tabs
            defaultActiveKey={'users'}
            type={'card'}
            style={{ marginTop: 30 }}
          >
            <Tabs.TabPane tab={'成员管理'} key={'users'}>
              <UsersList role={data} />
            </Tabs.TabPane>

            <Tabs.TabPane tab={'权限管理'} key={'permission'}>
              <ManagerList role={data} />
            </Tabs.TabPane>
          </Tabs>
        </Card>
      )}
    </>
  );
};
